分割控件（Splitter）

Splitter 类是一个分割控件，允许用户通过拖动子控件之间的分割边界来控制它们的大小。 分割控件的典型用法是创建多个子控件，并通过 insert() 或 add() 方法将它们添加到分割控件中。

事件

分割控件支持以下两种拖动事件：

拖动移动事件（dragMoved）

当用户拖动分割控件的分隔条时触发dragMoved事件 。

拖动结束事件（dragEnded）

当用户停止拖动分割控件的分隔条时触发dragEnded事件 。

// 监听拖动移动事件
splitter.bind('dragMoved', (event: DragMoveEvent): void => {
    event.absolute; // 当前鼠标位置（绝对坐标）
    event.relative; // 鼠标移动偏移量（相对坐标）
});
// 监听拖动结束事件
splitter.bind('dragEnded', (event: DragEndEvent): void => {
    event.absolute; // 拖动结束时鼠标位置（绝对坐标）
    event.relative; // 拖动结束时鼠标移动偏移量（相对坐标）
});

示例代码

创建分割控件

以下代码展示了如何创建一个分割控件并添加子控件：

const desktop = Desktop.instance(); // 获取桌面实例
const splitter = new Splitter(desktop); // 创建分割控件并添加到桌面

// 创建三个子控件
const widget1 = new Widget();
const widget2 = new Widget();
const widget3 = new Widget();

// 将子控件添加到分割控件中
splitter.add(widget1);  // 添加到末尾
splitter.insert(0, widget2);  // 插入到索引 0 位置
splitter.add(widget3);  // 添加到末尾

设置分割控件的方向

可以通过指定方向来创建水平或垂直的分割控件：

• Orientation.Horizontal：水平分割（默认）。
• Orientation.Vertical：垂直分割。

const desktop = Desktop.instance(); // 获取桌面实例
const splitter = new Splitter(desktop, Orientation.Vertical); // 创建一个垂直方向的分割控件
...